<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script type="text/javascript">
var ctx = document.getElementById('myCanvas').getContext("2d");
// 绘制背景。
ctx.fillStyle="black";
ctx.fillRect(0,0,300,300);
ctx.fill();
// 绘制圆形。
ctx.beginPath();
ctx.arc(150,150,130,0,Math.PI*2,true);
// 裁切路径。
ctx.clip();
ctx.translate(200,20);
for (var i=1;i<90;i++){
	ctx.save();
	ctx.transform(0.95,0,0,0.95,30,30);
	ctx.rotate(Math.PI/12);
	ctx.beginPath();
	ctx.fillStyle="red";
	ctx.globalAlpha="0.4";
	ctx.arc(0,0,50,0,Math.PI*2,true);
	ctx.closePath();
	ctx.fill();
    }

</script>
</body>
</html> 
